<template>
    <el-form
        ref="formRef"
        :model="parentFormData"
        :rules="rules"
        label-width="200px"
        label-position="right"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="名称(全称)" prop="collegeName">
            <el-input v-model="parentFormData.collegeName" placeholder="请输入学院名称(全称)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设单位（工会）" prop="buildCompany" >
            <el-input v-model="parentFormData.buildCompany" placeholder="请输入建设单位（工会）"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属区工会或产业工会" prop="belongTo">
            <el-select v-model="parentFormData.belongTo" placeholder="请选择所属区工会或产业工会">
              <!--TODO:后面转成后端返回数据-->
               <el-option v-for="item in [{id:'1',label:'区工会',},{id:'2',label:'产业工会',}]" :label="item.label" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设单位联系人" prop="buildContact">
            <el-input v-model="parentFormData.buildContact" placeholder="请输入建设单位联系人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input v-model="parentFormData.contactPhone"  placeholder="请输入联系电话"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工匠学院负责人" prop="director">
            <el-input v-model="parentFormData.director"  placeholder="请输入工匠学院负责人"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="负责人联系电话" prop="directorPhone">
            <el-input v-model="parentFormData.directorPhone" placeholder="请输入负责人联系电话" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系邮箱" prop="contactEmail">
            <el-input v-model="parentFormData.contactEmail" placeholder="请输入联系邮箱" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="详细地址" prop="address">
            <el-input type="textarea" v-model="parentFormData.address" placeholder="请输入详细地址" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
</template>
<script setup lang="ts">
import {
  PropType,
  reactive,
    ref,
} from 'vue'
import {useVModel} from "@vueuse/core";
import {BasicInfoFormDataType} from "../../type";
const props = defineProps({
  modelValue: { type: Object as PropType<BasicInfoFormDataType>, default: () => ({}) },
})
const emit = defineEmits(['update:modelValue'])
const formRef = ref()
const parentFormData = useVModel(props, 'modelValue', emit)
const rules = reactive({
  //学院名称(全称)
  collegeName: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //建设单位（工会）
  buildCompany: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //所属区工会或产业工会
  belongTo: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //建设单位联系人
  buildContact: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //联系电话
  contactPhone: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //工匠学院负责人
  director: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //负责人联系电话
  directorPhone: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //联系邮箱
  contactEmail: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
  //详细地址
  address: [{ required: true, message: '当前项不能为空', trigger: 'blur' }],
})
/**
 * @description 表单校验方法
 * @author 莫若省
 * @createTime 2024/6/24
*/
const validateForm = () => {
  return formRef.value.validate()
}
/**
 * @description 获取表单实列对象
 * @author 莫若省
 * @createTime 2024/6/24
*/
const getFormInstance = () => {
  return formRef.value
}
defineExpose({
  validateForm,
  getFormInstance,
})
</script>
<style scoped lang="scss"></style>
